<template>
  <view class="detail-container">
    <view class="header">
      <text class="school">{{ demand.schoolName }}</text>
      <text class="status-tag" :class="demand.status">{{ demand.status }}</text>
    </view>
    
    <view class="map-section">
      <!-- 这里可以集成地图组件 -->
      <image src="/static/map-placeholder.jpg" class="map-image" />
    </view>
    
    <view class="info-card">
      <view class="info-item">
        <uni-icons type="location" size="20" color="#5bc0eb" />
        <text>{{ demand.location }}</text>
      </view>
      <view class="info-item">
        <uni-icons type="person" size="20" color="#5bc0eb" />
        <text>需要{{ demand.needCount }}名支教老师</text>
      </view>
      <view class="info-item">
        <uni-icons type="calendar" size="20" color="#5bc0eb" />
        <text>{{ demand.duration }}</text>
      </view>
    </view>
    
    <view class="content-section">
      <text class="title">需求详情</text>
      <text class="content">{{ demand.content }}</text>
    </view>
    
    <view class="fixed-footer">
      <button class="contact-btn" @click="showContact">联系校方</button>
      <button 
        class="collect-btn" 
        :class="{ collected: isCollected }"
        @click="toggleCollect"
      >
        {{ isCollected ? '已收藏' : '收藏需求' }}
      </button>
    </view>
  </view>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      demand: {
        id: 1,
        schoolName: '阳光希望小学',
        location: '云南省丽江市古城区',
        needCount: 3,
        duration: '2023年9月1日-2024年1月31日',
        content: '急需小学语文、数学、英语教师...',
        contact: '李校长 138****1234',
        status: '招募中'
      },
      isCollected: (uni.getStorageSync('collections') || []).some(item => item.id === this.demand.id)
    }
  },
  methods: {
    showContact() {
      uni.showModal({
        content: this.demand.contact,
        confirmText: '复制号码',
        success: () => {
          uni.setClipboardData({ data: this.demand.contact })
        }
      })
    },
    toggleCollect: _.debounce(function() {
      this.isCollected = !this.isCollected
      const collections = uni.getStorageSync('collections') || []
      if (this.isCollected) {
        collections.push(this.demand)
      } else {
        const index = collections.findIndex(item => item.id === this.demand.id)
        collections.splice(index, 1)
      }
      uni.setStorageSync('collections', collections)
      uni.showToast({
        title: this.isCollected ? '收藏成功' : '已取消收藏'
      })
    }, 500)
  }
}
</script> 